<template>
  <div class="school">
    <div class="s-title">
      <h3>学员感言</h3>
      <p @click="goToAll">全部&gt;</p>
    </div>
    <div class="s-main">
      <p>小红：非常感谢</p>
      <p>小王：感谢</p>
    </div>
    <div class="test">
      <p v-for="item in datas" :key="item.id">{{ item.title }}</p>
    </div>
    <div class="test" v-if="datas2">
      <p>{{ datas2.title }}</p>
      <p>{{ datas2.age }}</p>
      <p>{{ datas2.other.name }}</p>
      <p>{{ datas2.other.weight }}</p>
    </div>
    <img v-for="i in 10" :key="i" class="img" src="../assets/test.jpg" alt="" />
  </div>
</template>

<script>
export default {
  name: "SchoolView",
  data() {
    return {
      datas: undefined,
      datas2: null,
    };
  },
  created() {
    setTimeout(() => {
      this.datas2 = {
        other: {
          name: "小明",
          weight: 180,
        },
        title: "学生",
        age: 22,
      };
    }, 5000);
  },
  methods: {
    goToAll() {
      this.$router.push({
        name: "thanks",
      });
    },
  },
  mounted() {
    console.log("组件首次渲染完毕", this.datas2);
  },
  updated() {
    console.log("组件更新了", this.datas2);
  },
};
</script>

<style lang="scss" scoped>
.school {
  margin-top: 90px;
  > .s-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    padding: 0 10px;
    background-color: #fff;
  }
  .img {
    width: 100vw;
    height: 100px;
  }
}
</style>
